﻿<!DOCTYPE html>
<html class="sans-serif-font borderless fill border-box-model center-parent">
<head>
    <meta charset="UTF-8">
    <title>火山PC Edge WebView2控件样例页</title>
    <style>
      .sans-serif-font {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }

      /*
          This style is used when the app cannot make the background transparent.
          It will enable this style by executing script.
      */
      .logo-background {
          background: url("./AppStartPageBackground.png") no-repeat;
          background-size: cover;
      }

      .border-box-model {
        box-sizing: border-box;
      }

      .fill, .container > div {
        width: 100%;
        height: 100%;
      }

      .mostly-fill {
        width: calc(100% - 200px);
        height: calc(100% - 200px);
      }

      .borderless, h1, h2 {
        border: 0;
        margin: 0;
        padding: 0;
      }

      .center-parent, .container > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .acrylic-background, .container > div {
        backdrop-filter: blur(20px) saturate(125%);
        background-color: rgba(255, 255, 255, 0.3);
      }

      .center {
        text-align: center;
        vertical-align: middle;
      }

      @media only screen
        and (min-width : 1001px) {
          .container {
            display: grid;
            grid-template-areas:
              'header header header'
              'box1 box1 box2'
              'box3 box4 box5'
              'box6 . .';
            grid-gap: 20px;
          }
      }

      @media only screen
        and (max-width : 1000px) {
          .container {
            display: grid;
            grid-template-areas:
              'header header '
              'box1 box1'
              'box2 box3'
              'box4 box5'
              'box6 . ';
            grid-gap: 20px;
          }
      }

      .header { grid-area: header; }
      .box1 { grid-area: box1; }
      .box2 { grid-area: box2; }
    </style>
</head>
<body class="mostly-fill container borderless logo-background">
    <div class="header">
        <h1 class="center">火山PC EdgeWebView2</h1>
    </div>

    <div class="box1">
      <div>
        <dl>
        <dt>SDK 版本</dt><dd id="sdkBuild">...</dd>
        <dt>运行时版本</dt><dd id="runtimeVersion">...</dd>
        <dt>运行时目录</dt><dd id="runtimePath">...</dd>
        <dt>程序目录</dt><dd id="appPath">...</dd>
        <dt>浏览器进程ID</dt><dd id="browserProcessId">...</dd>
        </dl>
      </div>
    </div>
    <script src="AppStartPage.js"></script>
    
    <div class="box2">
      <a href="https://www.voldp.com/">火山官网</a>
      <a href="https://bbs.voldp.com/forum.php">火山论坛</a>
      <a href="https://bbs.voldp.com/forum-2-1.html">火山平台俱乐部</a>
    </div>
    
</body>
</html>
